/*
====================================================
M E D I A  Q U E R I E S
====================================================
*/

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
	h1, .h1 {font-size:1.0rem;}
	h2, .h2 {font-size:0.9rem;}
	h3, .h3 {font-size:0.8rem;}
	h4, .h4 {font-size:0.7rem;}
	h5, .h5 {font-size:0.6rem;}
	h6, .h6 {font-size:0.5rem;}
	
	
	.display-1 {font-size:4.0rem;} 
	.display-2 {font-size:3.5rem;}
	.display-3 {font-size:3.0rem;}
	.display-4 {font-size:2.5rem;}	
	
	.fa-2x {font-size:1.0em;}
 
/*
Bootstrap 4 breakpoints - h1-h6 + display
*/

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
	h1, .h1 {font-size:1.5rem;} 
	h2, .h2 {font-size:1.3rem;}
	h3, .h3 {font-size:1.1rem;}
	h4, .h4 {font-size:1.0rem;}
	h5, .h5 {font-size:0.9rem;}
	h6, .h6 {font-size:0.8rem;}
	
	.display-1 {font-size:5.0rem;} 
	.display-2 {font-size:4.5rem;}
	.display-3 {font-size:4.0rem;}
	.display-4 {font-size:3.5rem;}
  
	.fa-2x {font-size:1.0em;}
	
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	h1, .h1 {font-size:2.0rem;}
	h2, .h2 {font-size:1.8rem;}
	h3, .h3 {font-size:1.6rem;}
	h4, .h4 {font-size:1.4rem;}
	h5, .h5 {font-size:1.2rem;}
	h6, .h6 {font-size:1.0rem;}
	
	.display-1 {font-size:6.0rem;} 
	.display-2 {font-size:5.5rem;}
	.display-3 {font-size:4.5rem;}
	.display-4 {font-size:3.5rem;}	
	
	.fa-2x {font-size:1.2em;}
	
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	h1, .h1 {font-size:2.5rem;}
	h2, .h2 {font-size:2.3rem;}
	h3, .h3 {font-size:2.1rem;}
	h4, .h4 {font-size:1.9rem;}
	h5, .h5 {font-size:1.7rem;}
	h6, .h6 {font-size:1.5rem;}

	.display-1 {font-size:6.5rem;}
	.display-2 {font-size:6.0rem;}
	.display-3 {font-size:5.5rem;}
	.display-4 {font-size:5.0rem;}		
	
	.fa-2x {font-size:2.0em;}

}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	/*h1, .h1 {font-size:3.0rem;}
	h2, .h2 {font-size:2.8rem;}
	h3, .h3 {font-size:2.6rem;}
	h4, .h4 {font-size:2.4rem;}
	h5, .h5 {font-size:2.2rem;}
	h6, .h6 {font-size:2.0rem;}*/  
	
	h1, .h1 {font-size:2.5rem;}
	h2, .h2 {font-size:2.3rem;}
	h3, .h3 {font-size:2.1rem;}
	h4, .h4 {font-size:1.9rem;}
	h5, .h5 {font-size:1.7rem;}
	h6, .h6 {font-size:1.5rem;}	

	.display-1 {font-size:7.5rem;} 
	.display-2 {font-size:7.0rem;}
	.display-3 {font-size:6.5rem;}
	.display-4 {font-size:5.5rem;}		
	
	.fa-2x {font-size:2.0em;}
	
}